<template>
	<view class="releaseRequirements">
		<f-navbar title="发布需求（检测）" :iconLeft="true" :isBack="true" @goBack="goBack" />
		<view class="releaseRequirements">
			<view
				class="releaseRequirements-content-one ff-bg-fff ff-color-222 ff-font-4 ff-margin-12 ff-border-radius-10">
				<view class="ff-font-weight-600 ff-font-17 ff-margin-bottom-5">基本信息</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="releaseRequirements-content-one-title1">工程名称</view>
					<input class="ff-text-right ff-line-height-1-3" placeholder="请输入工程名称"
						placeholder-style="color: #999" type="text" v-model.trim="demandInfoList.testName" />
				</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="releaseRequirements-content-one-title">工程地址</view>
					<view class="releaseRequirements-content-one-choice ff-text-right" @click="testAddrClick">
						<text class="ff-color-999" v-if="demandInfoList.testAddr == ''">请选择工程地址</text>
						<text class="ff-line-height-1-3" v-else>{{ demandInfoList.testAddr }}</text>
						<u-icon color="#999" name="map-fill"></u-icon>
					</view>
				</view>
				<view>
					<view class="ff-flex-between ff-border-bottom">
						<view class="releaseRequirements-content-one-title">检测类型</view>
						<view class="ff-flex ff-text-right" @click="testProjectClick">
							<view class="ff-color-999" v-if="testProjectName == ''">请选择检测类型</view>
							<view v-else>{{ testProjectName }}</view>
							<u-icon color="#2a3c62" name="arrow-right"></u-icon>
						</view>
					</view>
					<!-- 检测类型弹框 -->
					<u-select v-model="testProjectState" label-name="value" value-name="id"
						:safe-area-inset-bottom="true" @confirm="testProjectConfirm" :list="testProjectList"></u-select>
				</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="releaseRequirements-content-one-title">委托单位</view>
					<view class="ff-text-right ff-line-height-1-3">{{ companyInfo.companyName }}</view>
				</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="releaseRequirements-content-one-title1">建筑面积（m²）</view>
					<view class="ff-align-items-one">
						<input class="ff-text-right ff-padding-right-5" placeholder="请输入建筑面积"
							placeholder-style="color: #999" type="digit"
							v-model.trim="demandInfoList.testProjectArea" />
					</view>
				</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="releaseRequirements-content-one-title1">建筑高度（m）</view>
					<view class="ff-align-items-one">
						<input class="ff-text-right ff-padding-right-5" placeholder="请输入建筑高度"
							placeholder-style="color: #999" type="digit"
							v-model.trim="demandInfoList.testProjectHeight" />
					</view>
				</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="releaseRequirements-content-one-title1">建筑地上层数（层）</view>
					<view class="ff-align-items-one">
						<input class="ff-text-right ff-padding-right-5" placeholder="请输入建筑地上层数"
							placeholder-style="color: #999" type="number"
							v-model.trim="demandInfoList.buildingUpLayers" />
					</view>
				</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="releaseRequirements-content-one-title1">建筑地下层数（层）</view>
					<view class="ff-align-items-one">
						<input class="ff-text-right ff-padding-right-5" placeholder="请输入建筑地下层数"
							placeholder-style="color: #999" type="number"
							v-model.trim="demandInfoList.buildingDownLayers" />
					</view>
				</view>
				<view class="ff-border-bottom">
					<view class="releaseRequirements-content-one-title1 ff-margin-bottom-15">检测范围</view>
					<u-input type="textarea" maxlength="-1" height="200" :clearable="false" :border="true"
						v-model="demandInfoList.testScope" placeholder="请输入检测范围" />
				</view>
				<view>
					<view class="ff-flex-between ff-border-bottom">
						<view class="releaseRequirements-content-one-title1">检测项目</view>
						<view class="ff-flex ff-text-right" @click="facilitiesClick">
							<view class="ff-color-999" v-if="demandInfoList.facilitiesTypes.length < 1">请选择检测项目</view>
							<u-icon color="#2a3c62" name="arrow-right"></u-icon>
						</view>
					</view>
					<!-- 选中的检测项目 -->
					<view v-if="facilitiesSelectList.length > 0">
						<view class="ff-border-bottom ff-color-666 ff-font-14"
							v-for="(item, index) of facilitiesSelectList" :key="index">
							{{ index + 1 }}. &nbsp;{{ item.facilitiesTypeName }}
						</view>
					</view>
					<!-- 消防设施弹框 -->
					<u-popup v-model="facilitiesState" mode="bottom" height="55%">
						<view>
							<view class="ff-flex-between ff-bg-fff facilitiesBut">
								<view class="ff-color-666 ff-padding-20" @click.stop="cancelClick">取消</view>
								<view class="ff-color-blue ff-padding-20" @click.stop="confirmClick">确认</view>
							</view>
							<view
								class="ff-text-center ff-margin-left-30 ff-margin-right-30 ff-padding-top-60 ff-padding-bottom-20">
								<u-checkbox-group wrap>
									<u-checkbox v-for="(item, index) of facilitiesList" v-model="item.checked"
										:key="index" :name="item.facilitiesTypeName">
										{{ item.facilitiesTypeName }}
									</u-checkbox>
								</u-checkbox-group>
								<view class="ff">{{ item.facilitiesTypeName }}</view>
							</view>
						</view>
					</u-popup>
				</view>
				<view class="ff-flex-between ff-border-bottom engineerBox">
					<view class="releaseRequirements-content-one-title1 ff-padding-top-5">消防工程师人数限制</view>
					<view class="engineerRadio ff-flex">
						<u-radio-group v-model="engineerVal" @change="radioEngineerChange" wrap="true">
							<u-radio :name="0">不限制</u-radio>
							<u-radio :name="1">限制</u-radio>
						</u-radio-group>
						<view class="ff-align-items-one engineerNum" v-if="engineerVal != 0">
							<input placeholder="请输入" v-model.trim="demandInfoList.filterFireEngineerNum"
								class="ff-text-right ff-padding-right-5" type="number" />
							<view>人</view>
						</view>
					</view>
				</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="releaseRequirements-content-one-title">项目预算</view>
					<view class="ff-align-items-one">
						<input class="ff-text-right ff-padding-right-5" placeholder="请输入项目预算"
							placeholder-style="color: #999" type="digit" v-model.trim="demandInfoList.testProjectBudget"
							@input="projectBudgetBlur" />
						<view>元</view>
					</view>
				</view>
			</view>
			<view class="releaseRequirements-content-two ff-bg-fff ff-font-15 ff-margin-12 ff-border-radius-10">
				<view class="ff-font-weight-600 ff-font-17 ff-margin-bottom-5">联系人信息</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="releaseRequirements-content-one-title">联系人</view>
					<input class="ff-text-right ff-line-height-1-3" placeholder="请输入联系人" placeholder-style="color: #999"
						type="text" v-model.trim="demandInfoList.testProjectLink" />
				</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="releaseRequirements-content-one-title">联系电话</view>
					<input class="ff-text-right ff-line-height-1-3" placeholder="请输入联系电话"
						placeholder-style="color: #999" type="number" maxlength="11"
						v-model.trim="demandInfoList.testProjectPhone" />
				</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="releaseRequirements-content-one-title1">联系电话是否公开</view>
					<u-radio-group v-model="demandInfoList.showPhone">
						<u-radio :name="0">不公开</u-radio>
						<u-radio :name="1">公开</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="releaseRequirements-content-but">
				<view class="releaseRequirements-content-but-box"><u-button type="primary" shape="circle"
						@click="demandSubmit">提交</u-button></view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
		<u-modal v-model="infoModal" :show-cancel-button="true" @confirm="confirmInfo" title="温馨提示"
			:content-style="{ 'line-height': '1.5' }" content="退出后, 您填写的内容将不会被保存" />
		<u-modal v-model="statementModal" :content="statementContent" @confirm="statementConfirm" confirm-text="确认发布"
			cancel-text="取消发布" :show-cancel-button="true" title="免责声明" :content-style="{ 'line-height': '1.5' }" />
		<!-- 未获取到定位示弹框 -->
		<u-modal v-model="locationModal" title="温馨提示" :content-style="{ 'line-height': '1.5' }"
			content="当前位置获取失败，请您开启GPS定位权限后再试！" />
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		name: 'releaseRequirements',
		data() {
			return {
				locationModal: false, // 定位失败弹窗显/隐
				statementModal: false, // 发布弹框显/藏
				statementContent: '', // 发布弹框的内容
				infoModal: false, // 返回提示弹框的显/隐
				companyInfo: {}, // 单位详情
				engineerVal: 0, // 消防工程师是否限制
				// 检测项目类型
				testProjectState: '', // 检测项目类型单选显/隐
				testProjectName: '', // 检测项目类型名称
				testProjectList: [], // 检测项目类型数据
				// 主要消防设施
				facilitiesState: '', // 主要消防设施显/隐
				facilitiesList: [], // 主要消防设施数据
				facilitiesSelectList: [], // 选中的主要消防设施
				// 发布需求的参数
				demandInfoList: {
					testName: '', // 检测项目名称
					testAddr: "", // 检测项目地址
					testLongitude: '', // 检测项目经度
					testLatitude: '', // 检测项目纬度
					testProjectType: '', // 检测检测项目类型
					testProjectArea: '', // 项目建筑面积(m²)
					testProjectHeight: '', // 项目建筑高度(单位米)
					buildingUpLayers: '', // 建筑地上层数(单位层)
					buildingDownLayers: '', // 建筑地下层数(单位层)
					testScope: "", // 检测范围
					filterFireEngineerNum: '', // 过滤条件：注册消防工程师最少数量
					testProjectBudget: '', // 测试项目预算(元)
					showPhone: 0, // 是否公开联系电话(0：不公开 1：公开 默认公开)
					testProjectLink: "", // 检测项目联系人
					testProjectPhone: "", // 检测项目联系电话
					facilitiesTypes: [], // 检测项目
					facilities: []
				}
			};
		},
		onLoad() {
			// console.log('从前边页面获取的参数数据--------', e);
			this.getCompanyInfo(); // 获取单位详情页数据
			this.gettestProjectList(); // 获取检测项目类型列表数据
			this.getFacilitiesList(); // 获取主要消防设施列表数据
			this.demandInfoListLenghth = JSON.stringify(this.demandInfoList).length; // 初始的数据长度
		},
		computed: {
			// 用户角色状态
			...mapState({
				useInfo: modules => modules.infoList.userInfo
			})
		},
		methods: {
			// 返回上一层页面
			goBack() {
				if (JSON.stringify(this.demandInfoList).length >= this.demandInfoListLenghth) {
					this.infoModal = true;
				} else {
					this.$pageJump.reLaunch('/pages/detection/company/Company');
				}
			},
			// 返回上一层确认按钮
			confirmInfo() {
				this.$pageJump.reLaunch('/pages/detection/company/Company');
			},
			// 获取单位信息
			async getCompanyInfo() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.get({
					url: '/sys/user/info'
				});
				// console.log('获取单位信息----', data);
				if (data.code == 200) {
					const datas = data.data;
					this.companyInfo = datas.company; // 给需求类别赋值
					this.demandInfoList.testLongitude = datas.company.longitude; // 检测项目经度
					this.demandInfoList.testLatitude = datas.company.latitude; // 检测项目纬度
					this.demandInfoList.testAddr = datas.company.companyAddr; // 检测项目地址
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading(); // 关闭loading动画
			},
			// ----------------检测项目类型系列--------------------
			// 获取检测项目类型数据
			async gettestProjectList() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.post({
					url: '/bsTestProjectInfo/common/projectTypes'
				});
				// console.log('获取检测项目类型数据------------', data);
				if (data.code == 200) {
					this.testProjectList = data.data; // 给需求类别赋值
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading(); // 关闭loading动画
			},
			// 点击打开检测项目类型
			testProjectClick() {
				this.testProjectState = true;
			},
			// 选择检测项目类型确认后返回的数据
			testProjectConfirm(e) {
				this.demandInfoList.testProjectType = e[0].value;
				this.testProjectName = e[0].label;
			},
			// ----------------主要消防设施系列--------------------
			// 获取主要消防设施数据
			async getFacilitiesList() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.post({
					url: '/bsTestProjectInfo/common/facilitiesTypes'
				});
				// console.log('获取主要消防设施数据------------', data);
				if (data.code == 200) {
					let dat = [];
					data.data.forEach(res => {
						this.$set(res, 'checked', false);
					});
					this.facilitiesList = data.data; // 给需求类别赋值
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading(); // 关闭loading动画
			},
			// 点击打开主要消防设施
			facilitiesClick() {
				this.facilitiesState = true;
			},
			// 取消关闭消防设施弹窗
			cancelClick() {
				this.facilitiesState = false;
			},
			// 确定消防设施弹窗
			confirmClick() {
				this.facilitiesSelectList = [];
				this.demandInfoList.facilities = []
				this.demandInfoList.facilitiesTypes = []
				this.facilitiesList.filter(res => {
					if (res.checked) {
						this.facilitiesSelectList.push(res);
						this.demandInfoList.facilitiesTypes.push(res.id)
					}
				});
				this.facilitiesState = false;
			},
			// 检测地址
			testAddrClick() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						// console.log('获取检测地址数据---------', res);
						that.demandInfoList.testAddr = that.$check.emptySpecial(res
							.address); // 检测地址，清除特殊字符
						that.demandInfoList.testLatitude = res.latitude; // 检测地址纬度
						that.demandInfoList.testLongitude = res.longitude; // 检测地址经度
					},
					fail() {
						// console.log('位置定位失败返回----', error);
						that.locationModal = true;
					}
				});
			},
			// 消防工程师单选框选择
			radioEngineerChange(e) {
				if (e == 0) {
					this.engineerVal = 0;
					this.demandInfoList.filterFireEngineerNum = '';
					return;
				}
				if (e == 1) {
					this.engineerVal = 1;
					return;
				}
			},
			// 项目预算至多只能输入小数点后俩位
			projectBudgetBlur(val) {
				this.$nextTick(() => {
					this.demandInfoList.testProjectBudget = (val.match(/^\d*(\.?\d{0,2})/g)[0]) || null // 保留小数点后俩位
				})
			},
			// -------------------------点击提交-----------------------------
			demandSubmit() {
				if (this.demandInfoList.testName == '') {
					this.$refs.uToast.show({
						title: '请输入工程名称',
						type: 'error'
					});
					return;
				}
				if (this.demandInfoList.testProjectType == '') {
					this.$refs.uToast.show({
						title: '请选择检测项目类型',
						type: 'error'
					});
					return;
				}
				if (!this.$check.numberCheckPoint(this.demandInfoList.testProjectArea)) {
					this.$refs.uToast.show({
						title: '建筑面积必须为整数或小数点后两位',
						type: 'error'
					});
					return;
				}
				if (!this.$check.numberCheckPoint(this.demandInfoList.testProjectHeight)) {
					this.$refs.uToast.show({
						title: '建筑高度必须为整数或小数点后两位',
						type: 'error'
					});
					return;
				}
				if (!this.$check.numberCheck(this.demandInfoList.buildingUpLayers)) {
					this.$refs.uToast.show({
						title: '建筑地上层数必须为正整数',
						type: 'error'
					});
					return;
				}
				if (!this.$check.numberCheck(this.demandInfoList.buildingDownLayers)) {
					this.$refs.uToast.show({
						title: '建筑地下层数必须为正整数',
						type: 'error'
					});
					return;
				}
				if (this.demandInfoList.testScope == '') {
					this.$refs.uToast.show({
						title: '请输入检测范围',
						type: 'error'
					});
					return;
				}
				if (this.demandInfoList.facilitiesTypes.length < 1) {
					this.$refs.uToast.show({
						title: '请选择检测项目',
						type: 'error'
					});
					return;
				}
				if (this.engineerVal == 1 && this.demandInfoList.filterFireEngineerNum == '') {
					this.$refs.uToast.show({
						title: '请输入消防工程师人数限制',
						type: 'error'
					});
					return;
				}
				if (!this.$check.numberCheckPoint(this.demandInfoList.testProjectBudget)) {
					this.$refs.uToast.show({
						title: '预算金额必须为整数或小数点后两位',
						type: 'error'
					});
					return;
				}
				if (this.demandInfoList.testProjectLink == '') {
					this.$refs.uToast.show({
						title: '请输入联系人',
						type: 'error'
					});
					return;
				}
				if (!this.$check.isMobile(this.demandInfoList.testProjectPhone)) {
					this.$refs.uToast.show({
						title: '请输入正确的联系人电话',
						type: 'error'
					});
					return;
				}
				this.statementModal = true; // 发布弹框显/藏
				this.statementContent = `(1)请您确保发布的检测信息真实有效。(2)若发布检测信息导致的法律纠纷问题，均与本平台无关。(3)请严格按照消防安全规范发布检测信息。`; // 发布弹框的内容
			},
			// 发布弹框点击确认发布的操作
			statementConfirm() {
				this.$refs.loading.openLoading('提交中···'); // 打开loading动画
				this.$http
					.post({
						url: '/bsTestProjectInfo/com/addProject',
						data: this.demandInfoList
					})
					.then(res => {
						// console.log('发布需求返回的数据----------', res);
						if (res.code == 200) {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'success'
							});
							this.$pageJump.reLaunch('/pages/detection/company/Company');
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							});
						}
						this.$refs.loading.closeLoading(); // 关闭loading动画
					});
			}
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss" scoped>
	.releaseRequirements {
		/deep/.u-checkbox {
			line-height: 2;
		}

		&-content {
			margin-top: 190rpx;

			&-one {
				padding: 40rpx 26rpx 29rpx 26rpx;

				.ff-font-weight-600 {
					color: #0b204b;
				}

				.ff-border-bottom {
					padding: 40rpx 0;
					align-items: center;

					input {
						height: 28rpx;
						line-height: 1;
					}
				}

				&-title {
					width: 140rpx;
				}

				&-title1 {
					width: 290rpx;
				}

				&-choice {
					max-width: 551rpx;
					flex: 1;
				}

				.engineerBox {
					align-items: flex-start;

					.engineerRadio {
						width: 269rpx;
						position: relative;

						.engineerNum {
							position: absolute;
							right: 0;
							bottom: 4rpx;

							input {
								width: 100rpx;
							}
						}
					}
				}

				.facilitiesBut {
					position: fixed;
					top: 0;
					left: 0;
					width: 100%;
					z-index: 99;
				}
			}

			&-two {
				padding: 40rpx 30rpx 32rpx;

				.ff-border-bottom {
					padding: 40rpx 0;
					align-items: center;

					input {
						height: 28rpx;
						line-height: 1;
					}
				}

				&-title {
					color: #2a3c62;
				}
			}

			&-but {
				padding: 40rpx 0 80rpx;
				margin: 0 6%;
				width: 88%;
				text-align: center;

				/deep/.u-size-default {
					height: 90rpx !important;
					line-height: 90rpx !important;
				}
			}
		}

		.department {
			width: 400rpx;
		}
	}
</style>